<template>
  <div>
    <tinymce-editor
      ref="editor"
      :value="item.content"
      v-model="editorData"
      :disabled="loading"
      :readonly="!editing"
      comment-no-padding
    />
    <div v-if="editing" class="m-t-10 flex content-space-between">
      <el-button size="small" type="primary" @click="submitEdit" :loading="loading">确认修改</el-button>
      <el-button size="small" @click="cancelEdit">取消</el-button>
    </div>
  </div>
</template>

<script>
import { formatComment } from '@/components/issues-answers/format';

export default {
  name: 'content-show-edit',
  props: {
    item: Object,
    editing: Boolean,
  },
  data() {
    return {
      editorData: this.item.content,
      loading: false,
    };
  },
  methods: {
    // 提交编辑
    submitEdit() {
      this.loading = true;
      this.$api.comments.update({
        commentId: this.item.id,
        content: this.editorData,
      }).then((res) => {
        this.$message.success('修改成功');
        this.$emit('updated', formatComment(res.data));
        this.$emit('update:editing', false);
      }).catch(() => {})
        .then(() => { this.loading = false; });
    },
    // 取消修改
    cancelEdit() {
      this.$refs.editor.setContent(this.item.content);
      this.$emit('update:editing', false);
    },
  },
};
</script>

<style></style>
